

<div class="container-fluid">
  <div class="toolbar">

      <div class="form-inline">
        <div class="form-group">
            <input class="form-control input-sm" type="text" id="date-range">
        </div>
        <div class="form-group"><button class="btn btn-sm btn-success"id="btn-search">搜索</button></div>
      </div>

  </div>

  <table id="table"></table>
</div>

<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="form-title">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">详情</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="req-url"  class="control-label">请求地址：</label>
            <input type="text" class="form-control" id="req-url" readonly>
          </div>
          <div class="form-group">
            <label for="req-method"  class="control-label">请求方式：</label>
            <input type="text" class="form-control" id="req-method" readonly>
          </div>
          <div class="form-group">
            <label for="req-user"  class="control-label">请求人：</label>
            <input type="text" class="form-control" id="req-user" readonly>
          </div>
          <div class="form-group">
            <label for="req-user-login"  class="control-label">请求人账号：</label>
            <input type="text" class="form-control" id="req-user-login" readonly>
          </div>
          <div class="form-group">
            <label for="req-ip"  class="control-label">请求IP：</label>
            <input type="text" class="form-control" id="req-ip" readonly>
          </div>
          <div class="form-group">
            <label for="req-body" class="control-label">请求体：</label>
            <pre id="req-body"></pre>
          </div>
          <div class="form-group">
            <label for="result" class="control-label">响应结果：</label>
            <pre id="result"></pre>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
  $(function () {
    let app={

      dateRangeObj: $('#date-range'),
      btnSearchObj: $('#btn-search'),
      tableObj:$('#table'),
      modalForm:$('#modal-form'),

      init:function (){
        //初始化注册时间选择插件
        this.dateRangeObj.initDateRange();
        //初始化表格
        this.buildTable();
        //注册事件
        this.event();
      },
      buildTable:function (){
        let self=this;
        self.tableObj.destroyTable().initTable({
          method: 'get',  //以post的方式发送请求
          url: '/admin/monitor/logpage',    //url地址，可以是接口也可以是本地json文件
          uniqueId: "id",                     //每一行的唯一标识，一般为主键列
          showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
          cardView: false,                    //是否显示详细视图
          detailView: false,                  //是否显示父子表
          queryParamsType : "undefined",
          pagination:true,
          queryParams: function(params) { // 请求远程数据时，您可以通过修改queryParams来发送其他参数即server分页时，这里的queryParams参数就是提交到服务器端的参数了
            //补充自定义参数
            let dateRange=self.dateRangeObj.getDateRange()
            return {
              size:params.pageSize,
              page: params.pageNumber,
              start_time:dateRange.startDate.format('YYYY-MM-DD'),
              end_time:dateRange.endDate.format('YYYY-MM-DD')
            };

          },
          responseHandler: function (res) {

            return {
              rows:res.data.rows,
              total:res.data.total,
            };

          },
          columns: [
            {
              title: 'ID',
              visible: true,
              align: 'center',
              field: 'id',
              valign: 'middle',
              width:"10%"
            },
            {
              title: '请求地址',
              visible: true,
              align: 'center',
              field: 'req_url',
              valign: 'middle',
              width:"15%"

            },
            {
              title: '请求IP',
              visible: true,
              align: 'center',
              field: 'req_ip',
              valign: 'middle',
              width:"10%"

            },
            {
              title: '操作人',
              visible: true,
              align: 'center',
              field: 'real_name',
              valign: 'middle',
              width:"10%"

            },
            {
              title: '操作人账号',
              visible: true,
              align: 'center',
              field: 'user_name',
              valign: 'middle',
              width:"10%"

            },
            //
            {
              title: '请求方式',
              field: 'req_method',
              visible: true,
              align: 'center',
              valign: 'middle',
              sortable: false,
              width:"10%",
              formatter: function (value, row, index) {

                switch (value){
                  case "POST":
                    return "<span class='label label-warning'>"+value+"</span>"
                  case "GET":
                    return "<span class='label label-primary'>"+value+"</span>"
                  case "DELETE":
                    return "<span class='label label-danger'>"+value+"</span>"
                  case "PUT":
                    return "<span class='label label-info'>"+value+"</span>"
                  default:
                    return value
                }

              }
            },
            {
              title: '创建时间',
              field: 'created_at',
              visible: true,
              align: 'center',
              valign: 'middle',
              sortable: false,
              width:"15%"
            },
            {
              title: '操作',
              field: 'operator',
              visible: true,
              align: 'center',
              valign: 'middle',
              sortable: false,
              width:"20%",
              formatter: function (value, row, index) {
                value=row["id"]
                return "<div class='btn-group operator-group' ><a  data-type='edit' class='btn btn-xs  btn-info'  data-toggle='modal' data-target='#modal-form' data-whatever='@mdo' data-id="+value+">查看</a></div>"
              }
            }
          ]
        });
      },
      event:function (){
        let self=this;
        self.btnSearchObj.click(function (){
            self.buildTable();
        });
        self.modalForm.on('show.bs.modal', function (event) {

          let button = $(event.relatedTarget),
                  reqMethod =$('#req-method'),
                  reqBody =$('#req-body'),
                  reqUrl =$('#req-url'),
                  reqIp=$('#req-ip'),
                  id=button.data('id'),
                  reqUser=$('#req-user'),
                  result=$('#result'),
                  reqUserLogin=$('#req-user-login');

          if(!id){
            id=0;
          }
          doGet("/admin/monitor/findlog?id="+id,function (data){

            reqMethod.val(data.data.req_method)
            if(data.data.req_body){
              reqBody.jsonViewer(JSON.parse(data.data.req_body), {
                collapsed: true,
                withQuotes: false
              });
            }
            if(data.data.result){
              result.jsonViewer(JSON.parse(data.data.result), {
                collapsed: true,
                withQuotes: false
              });
            }
            reqUrl.val(data.data.req_url);
            reqIp.val(data.data.req_ip);
            reqUser.val(data.data.real_name);
            reqUserLogin.val(data.data.user_name);

          })


        }).on('hide.bs.modal', function (event) {

        });
      }

    }
    app.init();
  });
</script>
